<!-- 发布 -->
<template>
  <div class="w-full h-full flex flex-col">
    <header v-if="menus.length" class="flex pl-4 mb-2">
      <div v-for="(item, index) in menus" :key="item.title">
        <span :class="item.path == activeMenuName ? 'active-color' : ''" class="text-xl cursor-pointer" @click="changeChildMenu(item.path)">
          {{ item.title }}
        </span>
        <span v-if="index != menus.length - 1" class="px-2">|</span>
      </div>
    </header>
    <footer class="content-box flex-1 p-4 rounded">
      <router-view></router-view>
    </footer>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const menus = ref([])
const activeMenuName = ref('')
watch(
  () => route.matched[1].children,
  newValue => {
    menus.value = newValue.map(item => {
      return {
        title: item.meta.title,
        path: item.path
      }
    })
  },
  {
    immediate: true
  }
)
watch(
  () => route.matched[2],
  newValue => {
    // 不一定二级路由
    activeMenuName.value = newValue?.path
  },
  {
    immediate: true
  }
)

const changeChildMenu = path => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.content-box {
  border: 2px solid globalScss.$border-color;
}

.active-color {
  color: globalScss.$active-color;
}
</style>
